<template>
  <div class="app-container">
    <template>
      <el-tabs v-model="activeName" type="border-card">
        <el-row :gutter="20" class="my-el-row">
          <el-col><el-button type="primary" size="small" @click="dialogVisibleTrue">添加商品</el-button></el-col>
        </el-row>
        <el-tab-pane label="在售商品" name="first">
          <el-table :data="productList" v-loading.body="listLoading" element-loading-text="Loading" 
            border fit highlight-current-row>
            <el-table-column align="center" label='选择全部' width="80">
              <template slot-scope="scope">
                <el-checkbox ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="在售商品">
              <template slot-scope="scope">
                <el-row type="flex" justify="left">
                  <el-col :span="5"><img :src="productImg"></el-col>
                  <el-row :span="9">{{scope.row.title}}</el-row>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column label="库存" width="110" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.stock}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="150">
              <template slot-scope="scope">
                <el-row>
                  <el-button type="primary" size="mini" @click="dialogVisibleTrue">编辑</el-button>
                  <el-button type="danger" size="mini">删除</el-button>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已售罄商品" name="second">
          <transition name="fade">
          </transition>
        </el-tab-pane>
      </el-tabs>
    </template>
    <product-create :dialog-visible='dialogVisible' @visibleChanged="changeDialogVisible"></product-create>
  </div>
</template>

<script>
import { _getProductList } from '@/api/product'
import ProductCreate from '@/views/product/list/create'
// import ProductListTable from '@/views/product/list/productlisttable'
export default {
  mounted() {
    this.fetchData()
  },
  methods: {
    dialogVisibleTrue() {
      this.dialogVisible = true
    },
    // 获取商品列表
    fetchData() {
      _getProductList()
        .then(res => {
          console.log(res.data)
          this.listLoading = false
          this.productList = res.data.data
        })
    },
    // 对话框状态改变
    changeDialogVisible(data) {
      this.dialogVisible = data
    }
  },
  components: {
    ProductCreate
  },
  data() {
    return {
      productList: [],
      listLoading: true,
      dialogVisible: false,
      activeName: 'first',
      productImg: ''
    }
  }
}
</script>

<style scoped>
.my-el-row{
  margin-bottom: 20px;
}
</style>
